<!DOCTYPE HTML>
<html>
<head>
    <title>后台管理系统-xiaohe66</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../plugin/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <style>

        #body {
            padding-left: 200px;
            left: 0;
            bottom: 0;
        }

        .layui-tab-content {
            position: absolute;
            left: 200px;
            right: 0;
            bottom: 0;
            top: 50px;
            padding: 0;
            overflow: hidden;
        }

        .layui-tab-item {
            height: 100%;
        }

        #home {
            cursor: pointer;
        }

    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo" id="home">xiaohe66</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="" class="layui-nav-img" id="userImg"><span id="userName"></span>
                </a>
                <!--<dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>-->
            </li>
            <!--<li class="layui-nav-item"><a href="">退了</a></li>-->
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="menu" id="menu">
            </ul>
        </div>
    </div>

    <div class="layui-body" id="body">
        <!-- 内容主体区域 -->
        <div class="layui-tab" lay-filter="tab" lay-allowclose="true">
            <ul class="layui-tab-title">
            </ul>
            <div class="layui-tab-content">
            </div>
        </div>
    </div>

    <!--<div class="layui-footer">
        &lt;!&ndash; 底部固定区域 &ndash;&gt;
        © layui.com - 底部固定区域
    </div>-->
</div>
<script type="text/javascript" src="/static/plugin/layui/layui.js"></script>
<script type="text/javascript" src="/static/plugin/xh/js/xh-common.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function () {
        let element = layui.element;

        $ = layui.jquery;

        get("/sys/menu/all", function (res) {
            $.each(res, function (index, group) {
                let groupName = '<a class="" href="javascript:;">' + group.name + '</a>';
                let li = $('<li class="layui-nav-item layui-nav-itemed"></li>');
                li.append(groupName);
                $("#menu").append(li);
                if (group.children) {
                    let dl = $('<dl class="layui-nav-child"></dl>');
                    li.append(dl);
                    $.each(group.children, function (i, item) {
                        let dd = $('<dd><a href="javascript:;">' + item.name + '</a></dd>');
                        dd.attr('id', item.id);
                        dd.attr('link', item.link);
                        dl.append(dd);
                    });
                }
            });

            element.render('nav');

            let tabs = {};
            element.on('nav(menu)', function (elem) {
                let dd = elem.parent();
                let link = dd.attr('link');
                if (!link) return;
                let id = dd.attr('id');
                if (!tabs[id]) {
                    tabs[id] = id;
                    let iframe = '<iframe src="' + link + '" width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0"></iframe>';
                    element.tabAdd('tab', {
                        title: elem.text(),
                        content: iframe,
                        id: id
                    });
                }
                element.tabChange('tab', id);
            });

            element.on('tabDelete(tab)', function (data) {
                let id = $(this).parent().attr('lay-id');
                delete tabs[id];
            });
        });

        $.get("/org/user/info", function (data) {
            if (data.code === 100) {
                $("#userImg").attr("src", "/org/user/file/img/" + data.data.imgFileId);
                $("#userName").text(data.data.userName);
            }
        });

        $("#home").click(function () {
            location.href = "/";
        });
    });
</script>
</body>
</html>